<template>
	<main>
		<div class="wrap">
			<v-headerx></v-headerx>
			<div class="list">
				<div>
					<span class="gn">输入手机号</span>
					<span>输入验证码</span>
					<span>设置密码</span>
				</div>
			</div>
			<div class="list1">
				<input type="text" placeholder="请输入您的手机号">
			</div>
			<div class="list2">
				<input type="checkbox" class="mt">
				<span>我已经阅读并同意</span>
				<span class="gn">《美团网用户协议》</span>
			</div>
			<div class="list3">
				<button>获取验证码</button>
			</div>
		</div>
	</main>
</template>

<script>
	import headerx from "../components/headerx.vue"

	export default{
		name:"register",
		components:{
			"v-headerx":headerx
		},
		mounted(){
			this.$store.state.title="注册";
		}
	}
</script>

<style scoped>
	.wrap{
	    position: fixed;
	    top: 0;
	    bottom: 0;
	    height: 100%;
	    width: 100%;
	    background: #f0efed;
	    z-index: 1;
	}
	.list{
		background: white;
		text-align: center;
		display: flex;
	    padding: .2rem 0 .2rem .5rem;
	}
	.list span{
		font-size: .28rem;
	    padding-right: .4rem;
	    text-align: center;
	}
	.list span::after{
	    content: ">";
	    color: #aaa;
	    position: relative;
	    left: .17rem;
	}
	.list span:last-child::after{
		content:"";
	}
	.list>div{
	    display: flex;
	    margin: 0 auto;
	}
	 .gn{
		color: #06c1ae;
	}
	.list1{
		display: flex;
		background: white;
		margin-top: .2rem;
	}
	.list1 input{
		width: 100%;
		outline: none;
		border: none;
		height: .4rem;
		padding: .2rem;
	}
	.list2{
		font-size: .3em;
		padding: 10px;
	}
	.list2 input[type=checkbox]{
	    border-radius: .06rem;
	}
	.list3{
		font-size: .4rem;
		width: 100%;
		padding: .2rem;
		box-sizing: border-box;
	}
	.list3 button{
		width: 100%;
		padding: 0 .32rem;
	    border-radius: .06rem;
	    outline: none;
	    border: none;
	    height: .8rem;
	}
</style>